<template>
	<view class="u-number-box" :style="customStyle">
		<button class="u-number-icon f-fcen" @tap="reduce">
			-
		</button>
		<input type="number" v-model="inputValue" :disabled="inputDisabled" @input="inputHandler" class="u-number-input" @blur="blur"/>
		<button class="u-number-icon f-fcen" @tap="plus">
			<text class="icon-add"></text>
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number
			},
			min: {
				type: Number,
				default: 1
			},
			max: {
				type: Number,
				default: 99
			},
			step: {
				type: Number,
				default: 1
			},
			//  是否禁用input
			inputDisabled: {
				type: Boolean,
				default: false
			},
			// customStyle
			customStyle: {
				type: String,
				default: ''
			}
		},
		created() {
			this.inputValue = +this.value
		},
		data() {
			return {
				inputValue: 0
			};
		},
		watch: {
			value(val) {
				console.log('value----------------');
				console.log(val);
				this.inputValue = +val
			}
		},
		methods: {
			inputHandler(event) {
				console.log('event---------------');
				console.log(event);
			},
			getScale() {
				const that = this;
				let scale = 1;
				//浮点型
				if (!Number.isInteger(that.step)) {
					scale = Math.pow(10, (that.step + '').split('.')[1].length)
				}
				return scale;
			},
			calcNum(type) {
				const that = this;
				const scale = that.getScale()
				let num = that.value * scale
				let step = that.step * scale
				if (type === 'reduce') {
					num -= step
				} else if (type === 'plus') {
					num += step
				}
				let value = num / scale
				if (type === "plus" && value < that.min) {
					value = that.min
				} else if (type === "reduce" && value > that.max) {
					value = that.max
				}
				if (value < that.min || value > that.max) {
					return
				}
				that.handleChange(value, type)
			},
			plus() {
				this.calcNum("plus")
			},
			reduce() {
				this.calcNum("reduce")
			},
			blur(e) {
				const that = this;
				let value = e.detail.value
				if (value) {
					if (~value.indexOf(".") && Number.isInteger(that.step)) {
						value = value.split(".")[0]
					}
					value = Number(value)
					if (value > that.max) {
						value = that.max
					} else if (value < that.min) {
						value = that.min
					}
				} else {
					value = that.min
				}
				if (value == that.value && value != that.inputValue) {
					that.inputValue = value
				}
				that.handleChange(value, "blur")
			},
			handleChange(value, type) {
				const that = this;
				// that.$emit('change', {
				// 	value: value,
				// 	type: type,
				// 	index: that.index,
				// 	custom: that.custom
				// });
				that.$emit('input', value)
			}
		}
	}
</script>

<style lang="scss" scoped>
.u-number-box {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	.u-number-icon {
		width: 54rpx;
		height: 38rpx;
		font-size: 32rpx;
		color: #CBCBCB;
		border-radius: 4rpx;
		background-color: #F5F5F5;
	}
	.u-number-input {
		margin: 0 12rpx;
		width: 76rpx;
		font-size: 28rpx;
		text-align: center;
	}
}
</style>
